<template>
  <div class="card-list">
    <div class="card-header">
      <div>
        <span>{{ title }}</span>
        <span>{{ desc }}</span>
      </div>

      <div v-if="isTimeout">倒计时</div>
    </div>

    <div class="group">
      <div class="group-item" v-for="item in list">
        <CardItem :obj="item" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import CardItem from "./CardItem.vue";

defineProps({
  title: String,
  desc: String,
  isTimeout: Boolean,
  list: Array,
});

// import CardItem from './CardItem.vue'
</script>

<style lang="less" scoped>
.card-list {
  width: 90%;
  border-radius: 10px;
  background: #fff;
  padding: 10px;

  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .group {
    display: flex;
    width: 100%;

    .group-item {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
